<template>
  <!---------- 表格顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格数据区域 ----------->
  <TableTreeTemplate ref="tableRef" :columns="columns" />

  <!---------- 表配置窗体 区域 ----------->
  <ConfigSet ref="editRef" @dataReload="getTableData" />

  <!---------- 列配置窗体 区域 ----------->
  <ConfigFieldSet ref="fieldEditRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue'; // 操作区模版
  import TableTreeTemplate from '@/components/template/table/table-tree-template.vue'; //表格树模版
  import { bizApi } from '@/api/biz';

  import { message, Modal } from 'ant-design-vue';
  import ConfigSet from '@/views/tools/table/config_set.vue'; //模块添加页
  import ConfigFieldSet from '@/views/tools/table/config_field_set_table.vue'; //模块添加页
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  /* [数据表配置同步] 1. 调用接口 2. 刷新数据 */
  async function onSync() {
    const syncAction = 'base.manage.tableconfig.ServiceImpl.save'; //save接口 方法
    const syncParam = { table_name: 'table_name' }; //save接口 参数
    try {
      const result = await bizApi.httpSave(syncAction, syncParam);
      message.success({
        content: result.sub_message || '数据同步成功',
      });
      getTableData();
    } catch (error) {
      Promise.reject(error);
    }
  }

  /* [生成实体类] 1. 调用接口 2. 刷新数据 */
  const onGenerateEntity = async (id: number) => {
    Modal.confirm({
      // 先显示确认弹窗
      title: '确认生成实体',
      content: '确定要生成该表的实体类吗？此操作将根据表结构生成对应的实体代码。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        // 用户点击确认按钮时执行
        const action = 'base.manage.tableconfig.ServiceImpl.generateEntity'; //接口 方法
        const params = { table_config_id: id }; //接口 参数
        try {
          const result = await bizApi.httpSave(action, params);
          message.success({ content: result?.sub_message || '实体生成成功' });
          getTableData(); // 重新获取表格数据
        } catch (error: any) {
          message.error(error?.message || '实体生成失败');
        }
      },
      onCancel: () => {
        message.info('已取消生成操作');
      }, // 用户点击取消按钮时执行
    });
  };

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editRef.value?.show(id); //调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof ConfigSet | null>(null); //数据表配置 模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID，表名，显示名,2.调用子组件显示修改窗体 */
  const onFieldSet = (id: number, table_name: string, table_display_name: string) => {
    fieldEditRef.value?.show(id, table_name, table_display_name);
  };
  const fieldEditRef = ref<typeof ConfigFieldSet | null>(null); //字段配置 模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => {
    await tableRef.value?.getTableData(listAction, listParams, true);
  };
  const tableRef = ref<typeof TableTreeTemplate | null>(null); //table-template组件引用，用于执行组件内部方法
  const listAction = 'base.manage.tableconfig.ServiceImpl.list'; //list接口 方法名
  const listParams = { module_type: 2, module_level_type: 3 }; //list接口 参数,2:总后台模块,3:所有级别模块

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '同步',
      type: 'primary',
      icon: 'add' as const,
      permission: 'table_sync',
      onClick: onSync,
    },
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    {
      title: '表名',
      fixed: 'left',
      dataIndex: 'table_name',
      width: 180,
    },
    {
      title: '显示名',
      dataIndex: 'table_display_name',
      width: 180,
    },
    {
      title: '实体类最后更新时间',
      dataIndex: 'table_last_date',
      width: 150,
    },
    {
      title: '是否显示',
      dataIndex: 'table_is_display',
      options: { 1: '显示', 2: '不显示' }, //扩展 TableColumnType 字段，用于枚举类型映射文本值
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 30,
    },
    {
      title: '备注',
      dataIndex: 'table_memo',
      width: 250,
    },
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '配置表',
          type: 'link',
          permission: 'config_set',
          onClick: (record) => onEdit(record.table_config_id),
        },
        {
          children: () => '生成实体类',
          type: 'link',
          permission: 'config_set',
          onClick: (record) => onGenerateEntity(record.table_config_id),
        },
        {
          children: () => '配置字段',
          type: 'link',
          permission: 'config_field_set',
          onClick: (record) => onFieldSet(record.table_config_id, record.table_name, record.table_display_name),
        },
        {
          children: () => '自定义按钮1',
          type: 'link',
          permission: 'config_field_set1',
          more: true,
          onClick: () => null,
        },
        {
          children: () => '自定义按钮2',
          type: 'link',
          permission: 'config_field_set2',
          more: true,
          onClick: () => null,
        },
        {
          children: () => '自定义按钮3',
          type: 'link',
          permission: 'config_field_set3',
          more: true,
          onClick: () => null,
        },
      ],
    },
  ];
</script>
<style lang="less" scoped></style>
